<template>
    <div class="moduleList">
        <div class="module-main" v-for="(value, index) in list" :key="index" @click="$router.push('/' + value.url)">
            <div class="module-item"><img class="img" :src="value.img" />{{ value.name }}</div>
            <van-icon class="goto" name="arrow" />
        </div>
        <div class="module-main" @click="alterInfo">
            <div class="module-item"><img class="img"
                    src="http://higuang365.com/public/images/common/icon/info1.png" />个人信息</div>
            <van-icon class="goto" name="arrow" />
        </div>
    </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { GetmemberInfoDP } from '@/api/user'
import { useStore } from 'vuex'
import { Dialog } from 'vant'
export default {
    setup() {
        const data = reactive({
            list: [
                { name: '粉丝成员', url: 'Team', img: "http://higuang365.com/public/images/common/icon/fensi.png" },
                { name: '发起邀请', url: 'extension', img: "http://higuang365.com/public/images/common/icon/qrcode.png" },
            ]
        });
        const store = useStore();
        const alterInfo = async () => {
            const res = await GetmemberInfoDP({ member_id: store.state.userInfo.F_UserId, });
            if (!res[0]) {

                return;
            }
            Dialog.alert({
                title:'个人信息',
                message: `<div class="alert-Info">
                <div style="display:flex;text-align: left; "><div style="flex: 0 0 8rem;">姓名：</div><div class="alert-right">${res[1][0].NAME}</div></div>
                <div style="display:flex;text-align: left; "><div style="flex: 0 0 8rem;">证件号码：</div><div class="alert-right">${res[1][0].IDNumber}</div></div>
                <div style="display:flex;text-align: left; "><div style="flex: 0 0 8rem;">联系地址：</div><div class="alert-right">${res[1][0].recaddress}</div></div></div>`,
                theme: 'round-button',
                'allow-html': true
            })
        }
        return { ...toRefs(data), alterInfo }
    }
}
</script>
<style lang="scss" scoped>
.moduleList {
    margin: 1rem;
    font-size: 1.3rem;
    border-radius: .5rem;
}

.module-main {
    background: #fff;
    display: flex;
    padding: 1rem;
    justify-content: space-between;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 0 0 1px;

    .img {
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 1rem;
        vertical-align: middle;
    }

    .goto {
        line-height: 2.5rem;
    }
}

.module-main:active {
    background: transparent;
}

.alert-Info div {
    text-align: left;
}

span.alert-left {
    display: inline-block;
    width: 8rem;
    text-align: left;
}
</style>